<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<view class="new-top-nav">
			<uni-nav-bar title="产品详情" backgroundColor="#fff" color="#000" statusBar="true"
				@clickLeft="back()" left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="contain-view" :style="{height:setcollapseheight() + 'px'}">
			<!-- <image class="img" src="@/static/socialized-service/financial-insurance/product.png" mode="scaleToFill" style="width: 100%;"></image> -->
			
			<view class="title">
				<view class="title-txt">{{ product.productTitle }}</view>
				<view class="advice">
					<view class="co">{{ size }}人</view>已咨询
				</view>
			</view>
			
			<view class="content">
				<view class="item">
					<view class="name">
						{{product.financialAndInsuranceFlag === 0 ? '额度' : '保额'}}：
						<template>
							{{product.limitMin}}万
						</template>
						<template v-if="product.limitMax">
							~{{product.limitMax}}万
						</template>
					</view>
					<view class="name" v-if="product.financialAndInsuranceFlag === 0">
						利率：
						<template>
							{{product.interestRateMin}}%
						</template>
						<template v-if="product.interestRateMax">
							~{{product.interestRateMax}}%
						</template>
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{product.financialAndInsuranceFlag === 0 ? '还款期限' : '保险期限'}}：
						<template>
							{{product.deadlineMin}}年
						</template>
						<template v-if="product.deadlineMax">
							~{{product.deadlineMax}}年
						</template>
					</view>
				</view>
				<view class="item">
					<view class="name">
						产品供应方：{{product.supplierName}}
					</view>
				</view>
				<view v-html="product.productContent"></view>
				<!-- <view>{{ product.productContent }}</view>
				<view class="img-box">
					<image v-for="item,i in product.imgList" :key="i" class="img" 
						:src="item.productImgUrl" mode="scaleToFill"></image>
				</view> -->
			</view>
		</view>
		
		<view class="submit" v-if="!adviced">
			<button @click="toBuyPage" class="submit-btn">
				<image style="width: 30rpx;" class="icon-submit" src="@/static/wisdom-fishery/common/commit.png"
					mode="widthFix"></image>
				<text>意向购买</text>
			</button>
		</view>
		
		<view class="submit-content" v-if="adviced">
			<!-- 姓名 -->
			<view class="add-view-item">
				<image class="add-view-item-img" src="@/static/socialized-service/financial-insurance/user.png" mode="heightFix"></image>
				<view class="add-view-item-value">
					<view class="label">姓名：</view>
					<input type="text" class="content hasvalueinput" placeholder-class="nohasvalueinput" disabled
						placeholder="" v-model="productUserInfo.productUserName" />
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="add-view-item">
				<image class="add-view-item-img" src="@/static/socialized-service/financial-insurance/phone.png" mode="heightFix"></image>
				<view class="add-view-item-value">
					<view class="label">联系方式：</view>
					<input type="text" class="content hasvalueinput" placeholder-class="nohasvalueinput" disabled
						placeholder="" v-model="productUserInfo.productUserPhone" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import productApi from '@/api/socialized-servce/financial-insurance/product/index.js'
	export default {
		data() {
			return {
				productUserInfo: {},
				product: {},
				size: '',
				adviced: false
			}
		},
		onLoad(e) {
			this.productId = e.productId
			this.productUserId = e.productUserId
			this.adviced = e.adviced
			// this.queryById()
		},
		onShow() {
			this.queryById()
		},
		methods: {
			queryById(id) {
				if (!this.adviced) {
					productApi.queryById({ id: this.productId }).then(res => {
						this.product = res.data
						this.product.productContent = this.parseRich(res.data.productContent)
					})
				} else {
					productApi.queryByIdUser({ id: this.productUserId }).then(res => {
						this.productUserInfo = res.data
						this.product = res.data.product
						this.product.productContent = this.parseRich(res.data.productContent)
					})
				}
				productApi.queryByConditionUser({ id: this.productId }).then(res => {
					this.size = 0
					if(res.data) this.size = res.data
				})
			},
			parseRich(content) {
			  const singalList = [
			    ['&quot;', '"'],
			    ['&amp;', '&'],
			    ['&lt;', '<'],
			    ['&gt;', '>'],
			    ['&nbsp;', ' ']
			  ];
			  const tagList = ['p', 'span', 'img', 'a', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'font', 'b', 'i', 'u', 'code', 'table', 'tr', 'td', 'th','video']
			  singalList.forEach(i => {
			    content = content.replace(new RegExp(i[0], 'g'), i[1])
			  })
			  tagList.forEach(i => {
			    content = content.replace(new RegExp(`<${i} `, 'gi'), `<${i} class="rich-${i}-class" `)
			  })
			  return content;
			},
			toBuyPage() {
				const url = '/subPage1/socialized-service/financial-insurance/product/product-buy/index'
				this.$togo(url, {id: this.productId})
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(this.adviced ? 320 : 170)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
				  success: function(res) {
					winHeight = res.windowHeight
				  }
				});
				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				uni.navigateBack({ delta: 1 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;
		overflow: auto;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}
		
		.contain-view {
			margin: 0 30rpx;
			// padding: 20rpx 30rpx;
			position: relative;
			// background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			overflow-y: auto;
			
			.title {
				margin-bottom: 30rpx;
				display: flex;
				.title-txt {
					font-size: 36rpx;
					font-weight: bold;
					width: calc(100% - 200rpx);
				}
				.advice {
					width: 200rpx;
					text-align: right;
					.co {
						display: inline-block;
						color: #aa2c2c;
						font-weight: bold;
					}
				}
			}
			.content {
				margin-top: 20rpx;
				// height: calc(100% - 130rpx);
				// overflow: auto;
				word-wrap: break-word;
				
				.item {
					display: flex;
					margin-bottom: 20rpx;
					justify-content: space-between;
					font-size: 32rpx;
				}
				
				.img-box {
					margin-top: 30rpx;
					width: 100%;
					.img {
						width: 100%;
					}
				}
				/deep/.rich-img-class,/deep/.rich-video-class {
					width: 100%!important;
				}
				::v-deep.rich-img-class,::v-deep.rich-video-class {
					width: 100%!important;
				}
				.rich-img-class,.rich-video-class {
					width: 100%!important;
				}
			}
		}
		
		
		.submit {
			position: absolute;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
		
			.submit-btn {
				width: 268rpx;
				height: 64rpx;
				background: linear-gradient(27deg, #2F99FF 0%, #62B1FF 100%);
				box-shadow: 0rpx 0rpx 10rpx 2rpx #0082FF;
				border-radius: 40rpx;
				letter-spacing: 1rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
		
				.icon-submit {
					margin-right: 10rpx;
				}
			}
		}
		
		.submit-content {
			margin: 20rpx 30rpx 0;
			.add-view-item {
				width: calc(100% - 40rpx);
				height: 60rpx;
				margin-top: 30rpx;
				padding: 20rpx;
				color: #959595;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				background-color: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				font-size: 28rpx;
		
				&:first-child {
					margin-top: 0;
				}
		
				.add-view-item-img {
					width: 50rpx;
					height: 50rpx;
					// border-radius: 50%;
				}
		
				.add-view-item-value {
					width: calc(100% - 50rpx);
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
		
					.hasvalueinput {
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
						color: #000000;
					}
		
					.nohasvalueinput {
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
						color: #959595;
					}
				}
				.label {
					display: inline-block;
					width: 140rpx;
					vertical-align: top;
					margin-left: 20rpx;
					color: #000;
				}
				
				.content {
					display: inline-block;
					width: calc(100% - 160rpx);
					height: 100%;
				}
			}
		}
	}
	
</style>
